<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
<link rel="stylesheet" href="./style.css">

  </head>
    
  <body>
  <nav>
    <ul>
        <li><a href="#slide-1">Slide 1</a></li>
        <li><a href="#slide-2">Slide 2</a></li>
        <li><a href="#slide-3">Slide 3</a></li>
        <li><a href="#slide-4">Slide 4</a></li>
    </ul>
</nav>

<div class="slides-container">
    <div class="slide" id="slide-1">
        <div class="centered">
            <h1>Fullscreen slides with GSAP</h1>
            <p>Let's go to the <span class="go-next">next slide</span>.</p>
        </div>
    </div>
    <div class="slide" id="slide-2">
        <div class="centered">
            <h1>It is so easy to navigate through slides</h1>
            <p>You can go back to <span class="go-prev">previous slide</span> or go to the <span class="go-next">next slide</span>.</p>
        </div>
    </div>
    <div class="slide" id="slide-3">
        <div class="centered">
            <h1>Use mouse wheel</h1>

            <p>No, really. Try to scroll up and down with the mouse wheel to switch between slides.</p>
        </div>
    </div>
    <div class="slide" id="slide-4">
        <div class="centered">
            <h1>... Or use keyboard arrows</h1>
            <p>You go to previous and next slide, using up and down keyboard arrows.</p>
        </div>
    </div>
</div>
    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenLite.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/ScrollToPlugin.min.js'></script><script  src="./script.js"></script>

  </body>
  
</html>
